import React from 'react';
import {Tabs, Radio, Input, Select, Row, Col, Button, Table, Space, Form, DatePicker} from 'antd';


import styles from './index.less';
import {connect} from "dva";
import TableData from "../../components/tableDatas";

const { Option } = Select;
const namespace= 'accessManagement'
/**
 *  登录界面
 */
@connect(({loading,returnManagement}) => (
  {
    //控制状态，绑定事件
    loading: loading.effects["returnManagement/fetch"],
    dataList: returnManagement.dataList,
    pagination: returnManagement.pagination
  }
))

@Form.create()
export default class Management extends React.Component {



  selectChange = (e) => {
    alert(e)
  }


  render() {

    const {loading,dataList,pagination}  = this.props

    const columns = [
      {
        title: 'Role',
        dataIndex: 'role',
        key: 'role',
      },
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Status',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: 'Create date',
        dataIndex: 'create_date',
        key: 'create_date',
      },
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Password',
        dataIndex: 'password',
        key: 'password',
      },
      {
        title: 'Status',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: 'Action',
        dataIndex: '',
        key: 'x',
        render: () => <a>Delete</a>,
      },
    ];

    const tableProps = {
      columns,
      dataSource:dataList,
      loading,
      pagination:{
        total:pagination.total,
        current:pagination.current,
        pageSize:pagination.pageSize,
        hideOnSinglePage:true,
        showQuickJumper:true,
        showSizeChanger:true,
        onChange:(page, pageSize)=>{
          console.log(page, pageSize,'页码');
          this.props.dispatch({
            type:`${namespace}/fetch`,
            payload:{
              pageNum:page,
              pageSize
            }
          })
        },
        onShowSizeChange:(current, size)=>{
          console.log(current, size,'页码');
          this.props.dispatch({
            type:`${namespace}/fetch`,
            payload:{
              pageNum:current,
              pageSize:size
            }
          })
        }
      },
      // onChangePageNum:(num)=>{
      //   console.log(num,'页码')
      // },
      rowClassName:"rows",
      rowKey:"tables-index"
    }

    return (
      <div className={styles.formItem}>
        <Row justify="space-between">
          <Col span={4}>
            <div className={styles.headTitle}>
              <div className={styles.headTitleName}>Role</div>
              <Input placeholder="Basic usage"/>
            </div>

          </Col>
          <Col span={4}>
            <div className={styles.headTitle}>
              <div className={styles.headTitleName}>Status</div>
              <Select defaultValue="lucy" style={{width: "100%"}} onChange={this.selectChange}>
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>

          </Col>
          <Col span={4}>
            <div className={styles.headTitle}>
              <div className={styles.headTitleName}>&nbsp;</div>
              <Button>Search</Button>
            </div>
          </Col>
        </Row>
        <div style={{margin: "10px 0 10px 0"}}>
          <Button type="primary" style={{width:200}}>Add New Role</Button>
        </div>

        <div>
          <TableData  {...tableProps}/>
        </div>
      </div>
    )
  }
}
